<template>
  {{ ruleForm.slt }}
  <!--   :show-file-list="false" -->
  <el-upload
    action="#"
  
    :on-success="handleAvatarSuccess"
    :before-upload="beforeAvatarUpload"
    :on-change="handleChangeFile"
    :auto-upload="false"
    accept="image/svg+xml,image/jpeg,image/png"
  >

  <template #file="{ file }">{{ file }}</template>

    <img v-if="ruleForm.slt" :src="ruleForm.slt" class="select-img">
    <el-icon v-else class="avatar-uploader-icon">
      <!-- <Plus /> -->
      <span>上传5M内 SVG/PNG/JPEG</span>
    </el-icon>
  </el-upload>
</template>

<script lang="ts" setup>
import { reactive } from 'vue';
import { UploadProps } from 'element-plus';
import { ElMessage } from 'element-plus';
// import { Plus } from '@element-plus/icons-vue';

const ruleForm = reactive({
  slt: '',
});

// 上传缩略图
const handleAvatarSuccess: UploadProps['onSuccess'] = (
  response,
  uploadFile,
) => {
  console.log(response, uploadFile);
  ruleForm.slt = window.URL.createObjectURL(uploadFile.raw);
};


const handleChangeFile = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles, '-=-=-=-=-=-=-=-=');
  ruleForm.slt = window.URL.createObjectURL(uploadFile.raw);
  
}

const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
  console.log(rawFile,'思考思考思考');
  ruleForm.slt = window.URL.createObjectURL(rawFile);
  if (rawFile.size / 1024 / 1024 > 5) {
    ElMessage.error('文件大小不能超过 5MB!');
    return false;
  }
  const imageType = ['image/jpeg', 'image/png', 'image/svg+xml'];
  if (!imageType.includes(rawFile.type)) {
    ElMessage.error('只能上传 JPG/PNG/SVG 格式的图片!');
    return false;
  }
  return true;
};
</script>

<style lang="scss">
.el-upload {
  width: 10rem;
  height: 10rem;
  display: block;
  border: 0.0625rem solid var(--el-border-color);
  border-radius: 0.375rem;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);

  &:hover {
    border-color: var(--el-color-primary);
  }

  .select-img {
    width: 100%;
    height: 100%;
  }
  .el-icon.avatar-uploader-icon {
    font-size: 1.75rem;
    color: #8c939d;
    width: 10rem;
    height: 10rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;

    span {
      font-size: 0.6875rem;
      margin-top: 0.5rem;
    }
  }
}
</style>